import { CodeBlock, PackageManagerTabs } from '@theme';
import webpackDiffMJS from '../../public/diffs/repack_v3-v4_mjs.diff?raw';
import webpackDiffCJS from '../../public/diffs/repack_v3-v4_cjs.diff?raw';

# Re.Pack 3.x to 4.x

This guide shows how to upgrade from `@callstack/repack@3.x` to `@callstack/repack@4.x`.

If you are upgrading from any version prior to 3.x, we recommend that you follow other migration guides first.

:::info title="Thanks for using Re.Pack!"
If you are still facing some build or runtime errors after the migration, please open an issue.
:::

## Node version

Re.Pack 4.x requires Node.js >= 18.0.0 or newer.
Make sure to update your Node.js version before upgrading to 4.x.

## Dependencies

First, you need to update dependencies in your project's `package.json`:

<PackageManagerTabs command="install -D @callstack/repack@^4.0.0" />

:::tip

It's also recommended to update Webpack to the latest version.

:::

## Webpack config

Every project is different and we have no way of knowing what your Webpack config looks like, so we cannot
pin point every possible change you might need to do. Instead we provide a diffs of our
[Webpack config templates](https://github.com/callstack/repack/tree/HEAD/templates),
which you can use as a base to figure out what you need to change.

Below are the diffs of both `.mjs` and `.cjs` versions of `webpack.config`:

<details>
  <summary>
    <strong>MJS Diff</strong>
  </summary>
  <CodeBlock language="diff">{webpackDiffMJS}</CodeBlock>
</details>

<details>
  <summary>
    <strong>CJS Diff</strong>
  </summary>
  <CodeBlock language="diff">{webpackDiffCJS}</CodeBlock>
</details>

After applying these changes to your Webpack config, try bundling your application or running it.
If you have build errors try adjusting Webpack config based on what the errors are saying.

After addressing build errors, you should be able to run the application.

## CLI commands changes

Re.Pack commands now override the default `react-native start` and `react-native bundle`
Community CLI commands starting from React Native >= 0.74.0.

This change primarily impacts setups where both Metro and Re.Pack are used simultaneously.

To maintain your current workflow without adopting these overrides,
especially to avoid conflicts in projects using both Metro and Re.Pack,
you can opt out by filtering out the new command names and reverting to the legacy _webpack_ prefixed commands:

```js title="react-native.config.js"
const repackCommands = require('@callstack/repack/commands');

module.exports = {
  commands: repackCommands.filter((command) =>
    command.name.startsWith('webpack')
  ),
};
```

:::info
As a side effect of this change, running `react-native run-ios` or `react-native run-android`
will now launch the Re.Pack dev server by default instead of the Metro dev server.
:::

## Module resolution changes

We've investigated differences between Metro and Webpack module resolution and
made `getResolveOptions` compatible with `metro-resolver` and `@react-native/metro-config`

You might want to revisit your configuration if you were relying on one of these specific behaviours:

1. Order of extensions was changed to match the order from `@react-native/metro-config`.
   The only exception is `.json` extension which is always resolved last.
2. Resolution via Package Exports (using `exports` field in package.json)
   is now optional and disabled by default. It can now be enabled via `getResolveOptions`
   options parameter. This change was introduced to match `metro` defaults.
3. Default `conditionNames` are now: `['require', 'import', 'react-native']` and
   match `@react-native/metro-config` defaults.

## ReactRefreshPlugin removal

In Re.Pack 4.x we've removed `ReactRefreshPlugin` entirely.
If you were using `ReactRefreshPlugin`, you should replace it with `DevelopmentPlugin`.

## CodeSigningPlugin changes

`CodeSigningPlugin` no longer accepts `outputPath` property as configuration option.
Instead, it performs the code-signing in-place and integrates nicely with OutputPlugin.
You should remove `outputPath` from your `CodeSigningPlugin` configuration.
